<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<script type="text/javascript" src="../input_api/ipc.js"></script>
<script type="text/javascript" src="../input_api/ime_event.js"></script>
<script type="text/javascript" src="ime.js"></script>
<link href="../jquery/css/jquery-ui.css" rel="stylesheet">
<style type="text/css">
body {
  padding: 0;
  margin: 0;
  background: none transparent;
  font-family: sans-serif;
}

#imePanel {
  padding: 0.5em;
  min-width: 100px;
  min-height: 50px;
  background: #eee;
  border: 2px solid #aaa;
  float: left;
  margin: 10px;
  font-family: courier;
  box-shadow: 5px 5px 10px #ccc;
}

#menu {
  background: #ee0;
}

#menu div:hover {
  background: #ccf;
  cursor: pointer;
}

#menu div.active {
  background: #cfc;
}

#candidates {
  background: #fff;
  padding: 2px;
  margin: 5px;
  /*  white-space: nowrap; */
}

#candidates span {
  /* Some IMEs like Chewing will try to display lots of candidates, so let's
     allow wrapping. */
  /* white-space: nowrap; */
}

#composition {
  font-weight: bold;
  color: #777;
  padding: 2px;
  margin: 5px;
  background: #ddd;
}
#composition .segment {
  text-decoration: underline;
  padding-right: 2px;
}

#composition .cursor {
  background: #aaa;
  padding: 1px;
  margin: 0;
}

#auxiliaryText {
  padding-top: 10px;
  text-align: right;
}

.candidate:hover {
  background: #888;
  color: #fff;
  cursor: pointer;
}

.candidate_label {
  font-size: 80%;
  color: #f00;
}
</style>
</head>
<body>
<div id="imePanel">
  <div id="composition"></div>
  <div id="candidates"></div>
  <!-- <div id="menu">IME Menu</div> -->
  <div id="auxiliaryText"></div>
</div>
</body>
</html>
